<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabsHandleClick">
          <el-tab-pane label="服务页面管理" name="service">
            <ServiceCard ref="servicePageRef" v-if="activeName === 'service'" />
          </el-tab-pane>
          <el-tab-pane label="微信接口接入" name="wxInter">
            <WxinterCard />
          </el-tab-pane>
          <el-tab-pane label="微信菜单设置" name="wxMenu">
            <WxmenuCard />
          </el-tab-pane>
          <el-tab-pane label="平台通知" name="sysNotice">
            <NotesCard />
          </el-tab-pane>
          <el-tab-pane label="微信通知" name="wxNotice">
            <WxnoteCard />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'
  import ServiceCard from './components/ServiceCard/index.vue'
  import WxinterCard from './components/WxinterCard/index.vue'
  import WxmenuCard from './components/WxmenuCard/index.vue'
  import NotesCard from './components/NotesCard/index.vue'
  import WxnoteCard from './components/WxnoteCard/index.vue'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.servicePageSet,
  })

  const route = useRoute()
  const servicePageRef = ref() // 服务页面Ref实例对象
  const activeName = ref('service')

  // tabs切换事件
  const tabsHandleClick = (tab: TabsPaneContext) => {
    if (tab.props.name === 'service' && servicePageRef.value) {
      servicePageRef.value.getList()
    }
  }

  // 获取路径参数
  const getRouterQuery = () => {
    if (route.query.active) {
      activeName.value = route.query.active + ''
    } else {
      activeName.value = 'service'
    }
  }

  onMounted(() => {
    getRouterQuery()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
